<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .order-card {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .order-card:hover {
            transform: translateY(-5px);
        }
        .order-card img {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
        }
        .order-card h5 {
            margin-bottom: 10px;
        }
        .order-card .price-tag {
            color: #ff5722;
            font-weight: bold;
        }
        .btn-evaluate {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-evaluate:hover {
            background-color: #218838;
        }
        .btn-evaluated {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: not-allowed;
        }
    </style>
    <div th:replace="~{fragments/header :: header(title='我的订单')}"></div>

</head>
<body>


<!-- 订单列表内容 -->
<div class="container mt-4">
    <h2>我的订单</h2>
    <!-- 使用 th:each 遍历订单列表 -->
    <div th:each="order : ${orders}" class="order-card">
        <div class="row">
            <!-- 餐馆图片 -->
            <div class="col-md-2">
                <img th:src="${order.restaurant.logo}" alt="餐馆图片">
            </div>
            <!-- 餐馆名和花费金额 -->
            <div class="col-md-8">
                <h5 th:text="${order.restaurant.name}">餐馆名</h5>
                <p>花费金额：<span class="price-tag" th:text="'¥' + ${#numbers.formatDecimal(order.totalAmount, 1, 2)}">¥00.00</span></p>
            </div>
            <!-- 评价按钮 -->
            <div class="col-md-2 d-flex align-items-center justify-content-end">
                <!-- 如果订单状态为 0，显示“已评价”按钮（不可点击） -->
                <button th:if="${order.status == 0}" class="btn-evaluated" disabled>已评价</button>
                <!-- 否则显示“去评价”按钮（可点击） -->
                <button th:unless="${order.status == 0}" class="btn-evaluate" th:onclick="'showEvaluateModal(\'' + ${order.id} + '\')'">去评价</button>
            </div>
        </div>
    </div>
</div>

<!-- 评价模态框 -->
<div class="modal fade" id="evaluateModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">评价订单</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="evaluateForm">
                    <div class="mb-3">
                        <label for="rating" class="form-label">评分</label>
                        <select class="form-select" id="rating" name="rating" required>
                            <option value="1">1 星</option>
                            <option value="2">2 星</option>
                            <option value="3">3 星</option>
                            <option value="4">4 星</option>
                            <option value="5">5 星</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="comment" class="form-label">评价内容</label>
                        <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">提交评价</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // 显示评价模态框
    function showEvaluateModal(orderId) {
        const modal = new bootstrap.Modal(document.getElementById('evaluateModal'));
        modal.show();

        // 提交评价表单
        document.getElementById('evaluateForm').addEventListener('submit', function(event) {
            event.preventDefault();

            const formData = new FormData(event.target);
            const evaluateData = {
                orderId: orderId,
                rating: formData.get('rating'),
                comment: formData.get('comment')
            };

            // 发起异步请求
            fetch('/order/evaluate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(evaluateData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: '评价成功',
                            text: '感谢您的评价！',
                            confirmButtonText: '确定'
                        }).then(() => {
                            modal.hide();
                            window.location.reload(); // 刷新页面
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: '评价失败',
                            text: data.message || '评价提交失败，请稍后再试！',
                            confirmButtonText: '确定'
                        });
                    }
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: '网络错误',
                        text: '评价提交失败，请检查网络连接！',
                        confirmButtonText: '确定'
                    });
                });
        });
    }
</script>
</body>
</html>